/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-08 16:16:15
 */
import React, { memo } from "react";
import style from "./style/foundMusic.module.scss";
import { Outlet, useLocation, useNavigate } from "react-router-dom";

interface IFoundMusicProps {}

const menuList = [
  {
    name: "个性推荐",
    path: "/foundMusic/recommend",
  },
  {
    name: "专属定制",
    path: "/foundMusic/customized",
  },
  {
    name: "歌单",
    path: "/foundMusic/songList",
  },
  {
    name: "排行榜",
    path: "/foundMusic/rankList",
  },
  {
    name: "歌手",
    path: "/foundMusic/singer",
  },
  {
    name: "最新音乐",
    path: "/foundMusic/newMusic",
  },
];

const FoundMusic: React.FC<IFoundMusicProps> = memo((props) => {
  const Navigate = useNavigate();
  const { pathname } = useLocation();
  const menuClick = (path: string) => {
    if (pathname === path) return;
    Navigate(path);
  };
  return (
    <>
      <ul className={`trans ${style.menuBox}`}>
        {menuList.map((item) => {
          return (
            <li
              className={`trans ${[
                style.menuItem,
                item.path === pathname && style.active,
              ].join(" ")}`}
              key={item.path}
              onClick={() => menuClick(item.path)}
            >
              {item.name}
              {item.path === pathname && (
                <span className={`trans ${style.activeBar}`}></span>
              )}
            </li>
          );
        })}
      </ul>
      <div className={style.content}>
        <Outlet />
      </div>
    </>
  );
});

export default FoundMusic;
